<template>
  <div >
    <el-card >
      <el-form :inline="true" :model="searchForm">
<!--        状态-->
              <el-form-item label="状态:">
                <el-select v-model="searchForm.status" placeholder="选择线索状态">
                  <el-option v-for="(state,index) in state" :key="index" :label="state" :value="index+1"></el-option>
                </el-select>
              </el-form-item>
<!--              类型-->
        <el-form-item label="类型:">
          <el-select v-model="searchForm.type" placeholder="选择线索类型">
            <el-option v-for="(type,index) in type" :key="index"  :label="type" :value="type"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="编号:">
          <el-input placeholder="请输入编号" v-model="searchForm.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input placeholder="请输入姓名" v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input placeholder="请输入电话" v-model="searchForm.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Search">查询</el-button>
          <el-button type="success" @click="Reset">重置</el-button>

        </el-form-item>
      </el-form>
      <el-table
          :data="Clue"
          style="width: 100%;"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          border>
        <el-table-column
            prop="clueId"
            label="编号"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="80"
        >
          <template v-slot="scope">
   <span v-if="scope.row.status==1">审查中</span>
</template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="时间"
            width="160">
        </el-table-column>
        <el-table-column
            prop="type"
            width="80"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="name"
            width="80"
            label="上报姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            width="120"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="clueDescribe"
            label="描述"
            width="200"
        >
          <template v-slot="scope">
            <el-popover
                width="200"
                trigger="hover"
                placement="left"
                v-model="scope.row.showTooltip"
                :open-delay="500"
                :disabled="!scope.row.showTooltip"
            >
              <div>{{ scope.row.clueDescribe }}</div>
              <div slot="reference" @mouseenter="showTips($event,scope.row)" class='myNote'>{{ scope.row.clueDescribe }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址" width="200">
        </el-table-column>

        <el-table-column label="线索详情" width="200">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="details(scope.row)">查看详情</el-button>
            <!--          <el-button type="warning" size="small" @click="SeeMap(scope.row)">查看地图</el-button>-->
          </template>
        </el-table-column>


        <el-table-column label="操作" width="280">
          <template v-slot="scope">
<!--            <el-button type="primary" size="small" style="width: 80px;height: 32px;" v-if="scope.row.state=='未签收'" @click="SignClue(scope.row)">签收-->
<!--            </el-button>-->
<!--            <el-button type="primary" size="small" v-else @click="changeSignClue(scope.row)">取消签收</el-button>-->
                      <el-button type="success" size="small" @click="editClue(scope.row)">修改</el-button>
                      <el-button type="danger" size="small" @click="deleClue(scope.row)">删除</el-button>
                      <el-button type="info" size="small" @click="feedbackClue(scope.row)">反馈</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="block" style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pagesize"
            :current-page="pagenum"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
      <!--    弹窗-->
      <el-dialog :before-close="handleClose" title="线索类型修改" :visible.sync="Typedialog" width="20%">
        <el-form :model="Typeform">
          <el-form-item label="线索类型">
            <el-select v-model="Typeform.type" placeholder="选择线索类型" @change="TypeChange">
              <el-option v-for="(type,index) in type" :label="type"  :key="index" :value="index"></el-option>

            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Typedialog = false">取 消</el-button>
          <el-button type="primary" @click="Typedialogsub">确 定</el-button>
        </div>
      </el-dialog>
      <!--    反馈-->
      <el-dialog title="线索反馈" :visible.sync="Fankuidialog" width="30%" @close="closeFankuidialog()">
        <el-form :model="Fanform">
          <el-form-item label="反馈信息:" label-width="80px">
            <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="Fanform.text">
            </el-input>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Fankuidialog = false">取 消</el-button>
          <el-button type="primary" @click="FankuidialogBtn">确 定</el-button>
        </div>
      </el-dialog>
      <!--    视频弹窗-->
      <!--    <el-dialog title="视频详情" :visible.sync="videoDialog" width="40%" @close="closevideoDialog">-->
      <!--      <video :src="videoUrl" controls autoplay class="video" :ref="dialogVideo"-->
      <!--             width="100%"></video>-->
      <!--    </el-dialog>-->
      <el-drawer
          title="线索详情"
          :visible.sync="drawer"
          @close="drawerClose"
      >
        <el-tag style="margin:0 0 10px 26px;font-size: 16px">线索图片</el-tag>
        <div class="img-list">
          <el-image style=" width: 250px;
  height: 125px;
  margin: 7px;"  v-for="(image,index) in drawerFrom.imglist" :key="index" :src="image"  :preview-src-list="image | filterImg">
          </el-image>
        </div>
        <el-tag style="margin:10px 0 10px 26px;font-size: 16px">线索视频</el-tag>
        <div class="video">
          <video v-if="drawerFrom.video" :src="drawerFrom.video" style="width:500px;height:250px;" controls="controls">
          </video>
          <div v-else style="width: 500px;height: 250px;line-height: 250px;text-align: center;border: 1px solid #ccc">
            暂无视频
          </div>

        </div>
        <el-tag style="margin:10px 0 10px 26px;font-size: 16px">线索反馈</el-tag>
        <el-card style="margin: 0 26px 0 26px;">{{drawerFrom.clueBack}}</el-card>
      </el-drawer>
    </el-card>
  </div>
</template>
<script>
import {getAllClueApi}  from '../../api/index'
export default {
  name: "Examination",
  data(){
    return{
      judge: false,
      pagenum: 1,
      pagesize: 7,
      total: 0,
      drawer:false,//详情弹窗
      drawerFrom:{
        imglist:[],
        video:'',
        clueBack: '',
      },
      videoDialog:false,//video弹窗
      videoUrl:'', // 存储用户点击的视频播放链接
      type:['治安','涉恐','涉爆','其他'],
      // state:['待受理','审查中','已采纳','未采纳'],
      state:['审查中','已采纳','未采纳'],
      Fankuidialog:false,
      Fanform:{
        id:'',
        text:''
      },
      Typedialog:false,
      Typeform:{
        id:"",
        type:''
      },
      searchForm:{
        name:'',
        phone:'',
        id:'',
        type:'',
        status:''
      },
      Clue:[

      ]
    }

  },
  created() {
    this.getAllClueList()//获取所有线索列表
  },
  filters: {
    filterImg(item) {
      if(typeof item === "string") {
        return item.split("|");
      }else{
        return item
      }
    },
  },
  mounted() {
  },
  methods:{
    //点击进入地图
    SeeMap(){

    },
    //侧边栏关闭回调
    drawerClose(){
      this.drawerFrom=false
      this.drawerFrom={
        imglist:[],
        video:'',
        clueBack:''
      }
    },
    details(row) {
      console.log(row)
      this.drawer=true
      this.drawerFrom.imglist=row.img
      this.drawerFrom.video=row.video
      this.drawerFrom.clueBack=row.clueBack
      console.log(this.drawerFrom)
    },
    getAllClueList: function () {
      this.$axios({
        method: 'post',
        url: '/api/web/getWebClueByStatusIsOne',
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          status: 1,
          curPage: this.pagenum,
          pageSize: this.pagesize,
        }
      }).then(res => {
        console.log(res.data);
        this.Clue = res.data.data
        this.total=res.data.count
      })

    },
    handleSizeChange(val){
      this.pagesize=val
      if(this.judge==true){
        this.Search()
      }else{
        this.getAllClueList();
      }
    },
    handleCurrentChange(val){
      this.pagenum=val
      if(this.judge==true){
        this.Search()
      }else{
        this.getAllClueList();
      }
    },
    //关闭反馈弹窗回调
    closeFankuidialog(){
      this.Fanform={
        id:'',
        text:''
      }
    },
    //关闭修改弹窗回调
    handleClose(){
      this.Typedialog=false
    },
    //签收
    SignClue(row){
      // this.$axios.get('',{
      // }).then(res=>{
      //   console.log(res)
      // }),err=>{
      //   console.log(err)
      // }
      console.log(row)
      row.state="已签收"
    },
    //取消签收
    changeSignClue(row){
      row.state="未签收"
    },
    //修改
    editClue(e){
      this.Typeform.type=JSON.parse(JSON.stringify(e.type))
      this.Typeform.id=JSON.parse(JSON.stringify(e.clueId))
      this.Typedialog=true
    },
    //修改类型
    TypeChange(){
    },
    //修改确定
    Typedialogsub(){
      if(typeof(this.Typeform.type)=="string"){
        this.Typeform.type=this.Typeform.type
      }else {
        this.Typeform.type=this.type[this.Typeform.type]
      }
      console.log(this.Typeform)
      this.$axios({
          url:'/api/web/editWebClue',
        method: 'post',
        params:{
          clueId: this.Typeform.id,
          type: this.Typeform.type,
        }
      }).then(res=>{
        if(res.data.code==1){
          this.$message.success('修改成功')
          this.getAllClueList()
        }
      })

      this.Typedialog=false
    },
    //删除
    deleClue(e){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(()=>{
            this.$axios({
              method: 'post',
              url:'/api/web/deleteWebClue',
              headers: {
                'Content-type': 'application/json',
              },
              params:{
                clueId:e.clueId
              }
            }).then((res)=>{
              console.log(res)
              if(res.data.code==1){
                this.$message.success("删除成功")
                this.getAllClueList()
              }else {
                this.$message.error("网络错误")
              }
            }).catch((err)=>{
              this.$message.error(err)
            })
          })
          .catch(()=>{
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          })
    },
    //反馈
    feedbackClue(row){
      console.log(row)
      this.Fanform.id=row.clueId
      this.Fanform.text=row.clueBack
      this.Fankuidialog=true
    },
    //反馈提交按钮
    FankuidialogBtn() {
      this.Fankuidialog=false
      console.log(this.Fanform,'fanform')
      this.$axios({
         method: "post",
         url:'/api/web/editWebClue',
         headers: {
           'Content-type': 'application/json',
         },
         params:{
           clueId:this.Fanform.id,
           clueBack:this.Fanform.text+' ',
         }
       }).then((res)=>{
        if(res.data.code==1){
          this.$message.success('编辑成功')
          this.getAllClueList()
        }
       })
    },
    //查询
    Search(){
      this.judge = true;
      console.log(this.searchForm)
      var types=this.type[this.searchForm.type]||""
      // this.searchForm.status=this.state[this.searchForm.status]||""
      console.log(this.searchForm)
      this.$axios({
        method: "post",
        url: "/api/web/selWebClueByFiveQuery",
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          clueId:this.searchForm.id,
          name:this.searchForm.name,
          phone:this.searchForm.phone,
          type:types,
          status:this.searchForm.status,
          curPage: this.pagenum,
          pageSize: this.pagesize,
        }
      }).then( (res) =>{
        console.log(res)
        if(res.status==200){
          this.$message.success('查询成功')
          console.log(res.data,'data')
          const filteredData = res.data.data.filter(item => item.status == 1);
          console.log(filteredData)
          // console.log(filteredData,'filteredData')
          // this.Clue = filteredData.slice((this.pagenum - 1) * this.pagesize, this.pagenum * this.pagesize);
          // this.total=filteredData.length
        }
      }).catch(function (res) {
        console.log(res)
      })
    },
    Reset() {
      this.judge = false;
      this.searchForm={
        name:'',
        phone:'',
        id:'',
        type:'',
        status:''
      }
      this.$message.success('重置成功')
 this.getAllClueList();
    },

    showTips(obj, row){
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = row.clueDescribe;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();
      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
    }
  }
}
</script>
<style scoped>
.myNote{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}
.el-form-item {
  margin-bottom: 20px;
}
.img-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.video{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>

